<template>
	<view class="activePage" :style="bgColor==''?'':'background-color: '+bgColor">
		<image class="topBanner" :show-menu-by-longpress="true" :src="topimgUrl" mode="widthFix"></image>
		<view class="bgActive" :style="bgColor==''?'':'background-color: '+bgColor">
			<view class="newCustomShop">
				<view class="product">
					<view class="product-list flex-space-between flex-wrap">
						<view class="product-item bg-fff" v-for="(item,index) in productList" :key="index" @click="toDetail(item)">
							<image class="product-item-image" :src="item.product.file_path"></image>
							<view class="product-con">
								<view class="product-con-name u-line-2">{{item.product.product_name}}</view>
								<view class="flex-space-between productTip">
									<view class="product-con-price">
										<view class="bigText"><text
												class="smallText">￥</text>{{sumIntMoney(item.activity_price)}}<text
												class="smallText">{{decimalPart(item.activity_price)}}</text>
										</view>
										<text class="throughText">￥{{item.product_price}}</text>
									</view>
									<b-u-button-theme width="52rpx" height="40rpx" size="24rpx"
										@click="toDetail(item)">购买</b-u-button-theme>
								</view>
							</view>
						</view>
						<view class="product-item" v-if="productList.length % 2 == 1"></view>
					</view>
				</view>
				<view class="homePage" @click="homePageFun()" v-if="productList && productList.length>0">
					返回首页
				</view>
			</view>
		</view>
		<u-popup
            class="showPopup"
            v-model="showPop"
            mode="center"
            :mask-close-able="false"
			border-radius="20"
        >
			<view class="pop_container">
				<!-- <image class="active_end_img" :src="$setting.imageUrl()+'static/active_end.png'" mode="widthFix"></image> -->
				<image class="active_end_img" :src="$setting.imageUrl() + 'static/active_end.png'" mode="widthFix"></image>
				<view class="end_back">
					<view class="end_text">{{ end_text }}</view>
					<view class="popHomePage" @click="homePageFun()">
						了解更多精彩活动
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				end_text: '活动已经结束！',
				productPageForm: {
					activity_id:0
					// recommend: 0,
					// category_id: 0,
					// list_rows: 20,
				},
				productList: [],
				newCouponLists: [],
				userInfo: {},
				activity_type:0,
				topimgUrl:'',
				bgColor:'',
				share_title:'',
				share_img:'',
				navbar_title:'',
				navbar_bgcolor:'',
				share:{
					title: '',
					imageUrl:'',
           		 },
				showPop: false,
			}
		},
		async onLoad(options) {
			if(options.id){
				this.productPageForm.activity_id = options.id
			}
			// console.log(options,'options')
			if(this.productPageForm.activity_id==0){
				let sceneInfo = this.getScene(options.scene);
				if(sceneInfo.id){
					this.productPageForm.activity_id = sceneInfo.id
				}
			}
			await this.$onLaunched
			this.getHttp();
		},
		async onShow() {
			// this.getHttp();
			// #ifdef MP
				await this.$onLaunched;
			// #endif
			
			
        	this.getHttp();
		},
		methods: {
			getScene(scene) {
				let scene_new = decodeURIComponent(scene);
				let info = {};
				var list = scene_new.split("&");
				for (var i = 0; i < list.length; i++) {
					info[list[i].split(":")[0]] = list[i].split(":")[1];
				}
				return info;
			},
			homePageFun(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			decimalPart(product_price) {
				let price = parseFloat(product_price)
				// 使用 toFixed() 方法将价格保留两位小数，并将结果转换为字符串
				const priceWithDecimal = price.toFixed(2);

				// 使用 split() 方法将字符串按照 '.' 分割成两部分
				const parts = priceWithDecimal.split('.');

				// 返回小数部分的字符串
				return '.' + parts[1] || '00';
			},
			sumIntMoney(num) {
				return parseInt(num)
			},
			getHttp() {
				uni.$u.api.userInfo().then(res => {
					this.userInfo = res;
					this.getProduct();
				})
			},
			getProduct() {
				uni.$u.api.getActivityProduct(this.productPageForm).then(res => {
					console.log(res,'res')
					const now = new Date()
					const time = now.getTime() / 1000
					// 是否新人并且新人是否已下过单
					if (res.detail.is_new == 1 && res.detail.is_buy > 0) {
						this.end_text = '您已参与该活动！'
						this.showPop = true
					}
					// 活动结束，console.log(now, time); 小程序时间单位为毫秒
					if (time >= res.detail.end_time) {
						console.log(time,'time---');
						console.log(res.detail.end_time,'res.detail.end_time');
						this.showPop = true
						this.end_text = '活动已经结束！'
						// uni.showToast({
						// 	title: "当前活动已结束，首页更多活动敬请关注",
						// 	icon: "none",
						// 	duration: 2500
						// })
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// })
					}
					this.productList = res.list;
					this.activity_type = res.detail.activity_type;
					this.bgColor = res.detail.bgColor;
					this.topimgUrl = res.detail.imgUrl_path;
					this.share_title = res.detail.share_title;
					this.share_img = res.detail.share_img;
					this.navbar_title = res.detail.navbar_title;
					this.navbar_bgcolor = res.detail.navbar_bgcolor;
					this.share.title = res.detail.share_title
					this.share.imageUrl = res.detail.share_img_url
					if(this.navbar_title){
						uni.setNavigationBarTitle({
							title: this.navbar_title
						});
					}
					if(this.navbar_bgcolor){
						console.log(this.navbar_bgcolor,'this.navbar_bgcolor')
						uni.setNavigationBarColor({
							frontColor: '#000000',
							backgroundColor: this.navbar_bgcolor
						});
					}
				})
			},
			toDetail(item){
				console.log(this.activity_type)
				let gourl = '/pages/categoty/product/product_active?id='+item.product.product_id+'&activity_product_id='+item.activity_product_id;
				if(this.activity_type==1){
					gourl = '/pages/categoty/product/product?id='+item.product.product_id;
				}
				this.jump(gourl)
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.activePage {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;

		.topBanner {
			width: 100%;
			// height: 1100rpx;
		}


		.bgActive {
			width: 100vw;
			display: flex;
			justify-content: center;
			// background-color: #fef7dd;
			// background: linear-gradient(180deg, #ffb4ac 0%, #efccc7 100%);
		}

		.newCustomShop {
			.product {
				margin-top: 20rpx;
				width: 692rpx;

				.xinrenjia {
					width: 33px;
					height: 12px;
				}

				.product-list {
					padding-bottom: 30rpx;
					margin-top: 28rpx;

					.productTip {
						padding: 0rpx 10rpx 0rpx 0rpx;
					}

					.product-item {
						width: 334rpx;
						border-radius: 16rpx;
						margin-bottom: 24rpx;
						overflow: hidden;
						// height: 72vw;
					}

					.product-item-image {
						width: 334rpx;
						height: 328rpx;
					}

					.product-con {
						padding: 12rpx 20rpx 18rpx;

						.product-con-name {
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
							margin-bottom: 14rpx;
							min-height: 68rpx;
						}

						.product-con-price {
							.bigText {
								font-size: 35rpx;
								font-weight: normal;
								font-stretch: normal;
								line-height: 20rpx;
								color: #ff0000;
							}

							.throughText {
								text-decoration: line-through;
								color: #828282;
								font-size: 24rpx;
							}

							.smallText {
								font-size: 24rpx;
								font-weight: normal;
								color: #ff0000;
							}
						}
					}
				}
			}
		}
	}
.homePage {
	color: #fff;
	font-weight: bold;
	background: #b90000;
	border-radius: 30rpx;
	margin: auto;
	width: 280rpx;
	text-align: center;
	font-size: 38rpx;
	margin-bottom: 50rpx;
	letter-spacing: 3px;
	line-height: 60rpx;
}
.pop_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 450rpx;
	position: relative;
	padding: 30rpx 30rpx 40rpx;
}
.active_end_img {
	width: 160rpx;
}
.end_back {
	width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.end_text {
	color: #666;
    font-size: 22rpx;
	padding: 16rpx;
}
.popHomePage {
	width: 100%;
	margin: auto;
	border-radius: 30rpx;
	background: #ff2122;
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
	line-height: 60rpx;
	text-align: center;
	letter-spacing: 3rpx;
	box-shadow: 0 2rpx 4rpx #ff2122;
}
</style>